<template>
    <div>
        <el-select
            :value="defaultValue"
            popper-class="virtualselect"
            filterable
            :filter-method="filterMethod"
            @visible-change="visibleChange"
            v-bind="$attrs"
            v-on="$listeners"
            size="mini"
            style="width:100%"
        >
            <virtual-list
                ref="virtualList"
                class="virtualselect-list"
                :data-key="selectData.value"
                :data-sources="selectArr"
                :data-component="itemComponent"
                :keeps="20"
                :extra-props="{
                    label: selectData.label,
                    value: selectData.value,
                    isRight: selectData.isRight,
                    disabled: selectData.disabled,
                    show1: show1,
                    showDisdata: showDisdata,
                    Accountdisabled: Accountdisabled,
                    AccountdisabledAll: AccountdisabledAll,
                }"
            >
            </virtual-list>
        </el-select>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Model } from 'vue-property-decorator';
import VirtualList from 'vue-virtual-scroll-list';
import ElOptionNode from './el-option-node.vue';

@Component({
    name: 'RiskVirtualSelect',
    components: { VirtualList },
})
export default class ItemSetting extends Vue {
    @Model('change') defaultValue!: string;
    // @Prop({ default: '' }) defaultValue: string;
    @Prop({ default: {} }) selectData: any;
    @Prop({ default: false }) show1: boolean;
    @Prop({ default: false }) showDisdata: boolean;
    @Prop({ default: false }) Accountdisabled: boolean;
    @Prop({ default: false }) AccountdisabledAll: boolean;

    itemComponent: any = ElOptionNode;
    selectArr: any[] = [];

    mounted() {
        this.init();
    }

    @Watch('selectData.data', { immediate: true, deep: true })
    watchSelectData(newData, oldData) {
        this.init();
    }

    init() {
        if (!this.defaultValue || !this.defaultValue?.length) {
            this.selectArr = this.selectData.data;
        } else {
            // 回显问题
            // 由于只渲染20条数据,当默认数据处于20条之外,在回显的时候会显示异常
            // 解决方法:遍历所有数据,将对应回显的那一条数据放在第一条即可
            this.selectArr = JSON.parse(JSON.stringify(this.selectData.data));
            let obj = {};
            for (let i = 0; i < this.selectArr.length; i++) {
                const element = this.selectArr[i];
                if (element[this.selectData.value] === this.defaultValue) {
                    obj = element;
                    this.selectArr.splice(i, 1);
                    break;
                }
            }
            this.selectArr.unshift(obj);
        }
    }

    // 搜索
    filterMethod(query) {
        if (query !== '') {
            (this.$refs.virtualList as any).scrollToIndex(0); // 滚动到顶部
            setTimeout(() => {
                this.selectArr = this.selectData.data.filter(item => {
                    return this.selectData.isRight
                        ? item[this.selectData.label].toLowerCase().indexOf(query.toLowerCase()) > -1 ||
                              item[this.selectData.value].toLowerCase().indexOf(query.toLowerCase()) > -1
                        : item[this.selectData.label].toLowerCase().indexOf(query.toLowerCase()) > -1;
                });
            }, 100);
        } else {
            this.init();
        }
    }

    visibleChange(bool) {
        if (!bool) {
            (this.$refs.virtualList as any).reset();
            this.init();
        }
    }
}
</script>
<style lang="scss" scoped>
.virtualselect {
    // 设置最大高度
    &-list {
        max-height: 245px;
        overflow-y: auto;
    }
    .el-scrollbar .el-scrollbar__bar.is-vertical {
        width: 0;
    }
}
</style>
